<template>
  <div class="min-h-screen w-full flex items-center justify-center bg-gray-200">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
      class="demo-ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" autocomplete="off" placeholder="用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="密码" />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-input v-model="ruleForm.captcha" placeholder="验证码" />
        <el-tag><img :src="captchaImg.src" /></el-tag>
      </el-form-item>
      <el-form-item>
        <div class="flex justify-between w-full">
          <el-checkbox v-model="autoLogin">自动登录</el-checkbox>
          <el-button link type="primary">忘记密码</el-button>
        </div>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="w-full">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { LoginApi, getCaptchaApi } from '@/api/login'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const captchaImg = reactive<Record<string, string>>({})
const ruleFormRef = ref<FormInstance>()

//密码验证规则
const checkPass = (rule: any, value: any, callback: any) => {
  if (value.trim()) {
    callback()
  } else {
    callback(new Error('请输入密码'))
  }
}
//
const checkCaptcha = (rule: any, value: any, callback: any) => {
  if (value.trim()) {
    callback()
  } else {
    callback(new Error('请输入验证码'))
  }
}

//账号验证规则
const checkUsername = (rule: any, value: any, callback: any) => {

  const regexp = /[a-zA-Z0-9]+$/
  if (regexp.test(value)) {
    callback()
  } else {
    callback(new Error('请输入账号'))
  }
}

const autoLogin = ref(false)

const ruleForm = reactive({
  captcha_id: '',
  captcha_code: '',
  captcha: '',
  username: '',
  password: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  captcha: [{ validator: checkCaptcha, trigger: 'blur' }],
  username: [{ validator: checkUsername, trigger: 'blur' }],
  password: [{ validator: checkPass, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      LoginApi({
        captcha_id: captchaImg.id!,
        captcha_code: ruleForm.captcha,
        username: ruleForm.username,
        password: ruleForm.password,
      }).then((res) => {
        localStorage.setItem('login', JSON.stringify(res.data))
        router.replace('/newspool')
      })
    } else {
      console.log('error submit!')
    }
  })
}


onMounted(() => {
  getCaptchaApi().then((res) => {
    captchaImg.src = res.data.image
    captchaImg.id = res.data.id
  })
})
</script>
<style scoped>
.demo-ruleForm {
  width: 30%;
}
</style>